// augmented ui-modal meant to replace alert() and display error details
.error-modal .modal-content {
    @extend .errormessagelarge;
    & > * {
        padding: 0;
        margin: 0;
        border: none;
    }
    // error details are in modal-content after modal-body
    .error-details {
        display: none;
        margin-top: 8px;
        // after a short preamble, show the details
        pre {
            // error details are black & white, word-wrapped
            border-radius: 3px;
            background: white;
            padding: 8px;
            white-space: pre-wrap;
            color: black;
        }
    }
    .modal-footer {
        margin-top: 8px;
        // float buttons individually, not as a div
        .buttons {
            width: 100%;
            float: none;
            & > * {
                float: right;
            }
        }
    }
}
